<template>
    <div class="addContent">
        <div class="topBtn">
            <div class="leftTop">
                <div class="tabText">
                    <i style="margin-left:30px;"></i> 
                    <span :class="{ 'active': showMain}" @click="showMain=true" >
                        <!-- <i></i> -->机构参数
                    </span>
                </div>
                <div class="tabText">
                    <i style="margin-left:10px;"></i>
                    <span :class="{ 'active': !showMain}" @click="showMain=false">
                        机构特性
                    </span>
                </div>
                
            </div>

            <div class="rightTop">
                <div class="tabText">
                    <i style="margin-left:30px;"></i> 
                    <span :class="{ 'active': !showList}" @click="showList = false" >
                        显示图形
                    </span>
                </div>
                <div class="tabText">
                    <i style="margin-left:10px;"></i>
                    <span :class="{ 'active': showList}" @click="showList = true">
                        显示列表
                    </span>
                </div>
                
            </div>
            
            <!-- <el-button :class="{ 'active': showMain, 'elBtn':true}" type="primary" style="border-radius:20px;" slot="reference" @click="showMain=true">
                <i></i>机构参数
            </el-button>
            <el-button :class="{ 'active': !showMain, 'elBtn':true}" type="primary" style="border-radius:20px;" slot="reference" @click="showMain=false">
                机构特性
            </el-button> -->
        </div>
        <div class="topBox">

            <div class="leftInput commonStyle flexDisplay" v-show="showMain">
                
                <div class="content">
                    <div class="topContent flexDisplay">
                        <div class="v-icon">
                            <span>输入运动</span>
                        </div>
                        <div class="listDown">
                            <ul>
                                <li>
                                    <i></i>
                                    <span>驱 动 形 式</span>
                                    <div class="select programSelect">
                                        <el-select class="" v-model="form.input" clearable >
                                            <el-option
                                            v-for="item in inputOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                    <div class="bottomContent">
                        <div class="v-icon">
                            <span>输出运动</span>
                        </div>
                        <div class="listDown">
                            <ul>
                                <li>
                                    <i></i>
                                    <span>转 动</span>
                                    <div class="select programSelect">
                                        <el-select class="" v-model="form.outZhuangdong" clearable  title="只能选择一种输出运动" @change="changeOut(1)"> 
                                            <el-option
                                            v-for="item in outRotate"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    
                                </li>
                                <li>
                                    <i></i>
                                    <span>移 动</span>
                                    <div class="select programSelect">
                                        <el-select class="" v-model="form.outYidong" clearable  title="只能选择一种输出运动" @change="changeOut(2)">
                                            <el-option
                                            v-for="item in outMove"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li>
                                    <i></i>
                                    <span>导 向 运 动</span>
                                    <div class="select programSelect">
                                        <el-select class="" v-model="form.outDaoxiang" clearable title="只能选择一种输出运动" @change="changeOut(3)">
                                            <el-option
                                            v-for="item in outGuideMove"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="leftSpacel commonStyle flexDisplay" v-show="!showMain">
                <div class="content">
                    <div class="mainContent flexDisplay">
                        <div class="v-icon">
                            <span>机构特性</span>
                        </div>
                        <div class="formDiv">
                            <el-form ref="form"  label-width="80px" style="width:95%;margin:auto">

                                <el-form-item label="">
                                    <div class="label">
                                        <i></i>
                                        <span>主从轴相对位置</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <el-select class="" v-model="zczxdwz" clearable >
                                            <el-option
                                            v-for="item in zczxdwzOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <!-- <el-input type="text" name="worksName" v-model="zczxdwz"  class="elInputCom"></el-input> -->
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item label="">
                                    <div class="label">
                                        <i></i>
                                        <span>相对尺寸</span>
                                    </div>
                                    <div class="select programSelect">
                                        <!-- <el-input type="text" name="worksName" v-model="xdcc"  class="elInputCom"></el-input> -->
                                        <el-select class="" v-model="xdcc" clearable >
                                            <el-option
                                            v-for="item in xdccOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum2" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <div class="label">
                                        <i></i>
                                        <span>传动函数的非对称性</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <!-- <el-input type="text" name="worksName" v-model="cdhsdfdcx"  class="elInputCom"></el-input> -->
                                        <el-select class="" v-model="cdhsdfdcx" clearable >
                                            <el-option
                                            v-for="item in cdhsdfdcxOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum3" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <div class="label">
                                        <i></i>
                                        <span>传动函数的线性部分</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <!-- <el-input type="text" name="worksName" v-model="cdhsdxxbf"  class="elInputCom"></el-input> -->
                                        <el-select class="" v-model="cdhsdxxbf" clearable >
                                            <el-option
                                            v-for="item in cdhsdxxbfOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum4" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <div class="label">
                                        <i></i>
                                        <span>加速度特性</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <!-- <el-input type="text" name="worksName" v-model="jsdtx"  class="elInputCom"></el-input> -->
                                        <el-select class="" clearable  v-model="jsdtx">
                                            <el-option
                                            v-for="item in jsdtxOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum5" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <div class="label">
                                        <i></i>
                                        <span>行程可调性</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <!-- <el-input type="text" name="worksName" v-model="xckdx"  class="elInputCom"></el-input> -->
                                        <el-select class="" clearable  v-model="xckdx">
                                            <el-option
                                            v-for="item in xckdxOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum6" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <div class="label">
                                        <i></i>
                                        <span>每双行程的转数</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <!-- <el-input type="number" name="worksName" v-model="mscxdzs"  class="elInputCom"></el-input> -->
                                        <el-select class="" v-model="mscxdzs" clearable >
                                            <el-option
                                            v-for="item in mscxdzsOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum7" clearable @change="changeGrade">
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <div class="label">
                                        <i></i>
                                        <span>主从动件可逆性值</span>
                                    </div>
                                    
                                    <div class="select programSelect">
                                        <!-- <el-input type="text" name="worksName" v-model="zcdxknx"  class="elInputCom"></el-input> -->
                                        <el-select class="" v-model="zcdxknx" clearable >
                                            <el-option
                                            v-for="item in zcdxknxOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="grand">
                                        <span>优先级</span> 
                                        <el-select v-model="gradeList.gradeNum8" clearable  @change="changeGrade" >
                                            <el-option
                                            v-for="index in numList"
                                            :key="index"
                                            :label="index"
                                            :value="index" :disabled="editIndex==index?true:false">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item> 
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightOut flexDisplay commonStyle">
                <div class="rightContent">
                    <div class="v-icon">
                        <span>生成方案</span>
                    </div>
                    <div class="emptyImg" v-if="showTipMsg">
                        <img src="../../../../images/img2.png" alt="">
                    </div>
                    <div class="contentBox" v-if="!showTipMsg">
                        <div class="imgBox" v-if="!showList">
                            <!-- <span class="noneData flexDisplay" v-if="showTipMsg">{{noneMsg}}</span>  -->
                            <el-card class="box-card" :body-style="{ height:'75%'}" v-for="item in jigouData" :key="item.id" >
                                <div slot="header" class="clearfix">
                                    <span class="sort">{{item.id}}</span>
                                    <span class="name">{{item.name}}</span>
                                    <span class="detail" @click.self="selectById(item.id)">查看</span>
                                </div>
                                <img :src="item.picture" class="image" title="机构简图">
                                <img :src="item.remarks" class="image" title="传动函数">
                            </el-card>
                        </div>
                        <div class="listBox" v-if="showList">
                            <el-table :data="jigouData" max-height="88%" border style="width: 100%" >
                                <el-table-column type="index" min-width="3%" align="center"></el-table-column>
                                <el-table-column prop="id" label="机构序号" min-width="15%" align="center"> </el-table-column>
                                <el-table-column prop="name" label="机构名称" min-width="35%" align="center"></el-table-column>
                                <el-table-column prop="op" label="操作" align="center" min-width="15%">
                                    <template slot-scope="scope">
                                        <el-button class="elBtn"  type="primary" size="mini" icon="edit"  @click="doDetail(scope.$index, scope.row)">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="pagenationBox">
                            <!-- 分页 -->
                            <div class="pagenation" v-if="!showTipMsg">
                                <el-pagination background 
                                layout="prev, pager, next, sizes, total" 
                                :page-sizes="pagesizes"
                                :page-size="pagesize"
                                :pager-count="5"
                                :total="totalNum"
                                @current-change="changePage"
                                @size-change="sizeChange"
                                > </el-pagination>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="bottom">
            <!-- <div class="leftBtn">
                <el-button :class="{ 'active': showMain, 'elBtn':true}" type="primary" style="border-radius:20px;" slot="reference" @click="showMain=true">机构参数</el-button>
                <el-button :class="{ 'active': !showMain, 'elBtn':true}" type="primary" style="border-radius:20px;" slot="reference" @click="showMain=false">机构特性</el-button>
            </div> -->
            <div class="btn">
                <span class="v-btn" style="margin-right:20px;" @click="selectWorks">生 成</span>
                <span class="v-btn active" style="margin-right:20px;" @click="resetForm">重 置</span>
                <router-link to="/programList">
                    <span class="v-btn active" >返 回</span>
                </router-link>
            </div>
        </div>

        

         <!-- 对话框 -->
        <el-dialog class="detailDialog fanganDetail" title="机构传动方案" :visible.sync="dialogFormVisible" width="70%" max-height="90%" center>
            <div class="detailMain">
                <div class="funBox commonStyle">
                    <div class="leftImg">
                        <viewer>
                            <img :src="detailForm.picture" alt="" style="width:100%;height:100%;">
                        </viewer>
                    </div>
                    <div class="rightContent">
                        <div class="title">
                            <span>机构功能</span>
                        </div>
                        <div class="contentList">
                            <ul>
                                <li><i></i><span class="labelText">机构名称:</span><span>{{detailForm.name}}</span></li>
                                <li><i></i><span class="labelText">运动变换:</span><span>从单向连续转动到往复直线运动</span></li>
                            </ul>
                        </div>
                        <div class="contentTable">
                            <div class="aliginItem">
                                <i></i><span class="labelText">机构结构:</span>
                            </div>
                            <el-table
                                :data="detailFormList"
                                border
                                style="width: 100%">
                                <el-table-column
                                prop="gjs"
                                align="center"
                                label="构件数"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="jhgx"
                                align="center"
                                label="运动空间"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="ydlxs"
                                align="center"
                                label="运动链形式"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="rack"
                                align="center"
                                label="机架"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="actuator"
                                align="center"
                                label="驱动件"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="follower"
                                align="center"
                                label="从动件"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="address"
                                align="center"
                                label="运动副类型|布置"
                                min-width="20%">
                                <template slot-scope="scope">
                                    <span>{{scope.row.type + ' | ' + scope.row.decorate}}</span>
                                </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="specialBox commonStyle">
                    <div class="leftImg">
                        <viewer>
                            <img :src="detailForm.remarks" alt="" style="width:100%;height:100%;">
                        </viewer>
                    </div>
                    <div class="rightContent">
                        <div class="title">
                            <span>机构特性</span>
                        </div>
                        <div class="contentTable">
                            <div class="aliginItem">
                                <i></i><span class="labelText">几何特性:</span>
                            </div>
                            <el-table
                                :data="detailFormList"
                                border
                                style="width: 33%">
                                <el-table-column
                                prop="zczxdwz"
                                align="center"
                                label="主从轴相对位置">
                                </el-table-column>
                                <el-table-column
                                prop="xdcc"
                                align="center"
                                label="相对尺寸">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="contentTable">
                            <div class="aliginItem">
                                <i></i><span class="labelText">传动特性:</span>
                            </div>
                            
                            <el-table
                                :data="detailTurnList"
                                border
                                style="width: 100%">
                                <el-table-column
                                prop="valueType"
                                label=""
                                align="center"
                                width="80">
                                </el-table-column>
                                <el-table-column
                                prop="cdhsdfdcx"
                                align="center"
                                label="传动函数的非对称性"
                                min-width="20%">
                                </el-table-column>
                                <el-table-column
                                prop="cdhsdxxbf"
                                align="center"
                                label="传动函数的线性部分"
                                min-width="20%">
                                </el-table-column>
                                <el-table-column
                                prop="jsdtx"
                                align="center"
                                label="加速度特性"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="xckdx"
                                align="center"
                                label="行程可调性"
                                min-width="10%">
                                </el-table-column>
                                <el-table-column
                                prop="mscxdzs"
                                align="center"
                                label="每双行程的转数"
                                min-width="20%">
                                </el-table-column>
                                <el-table-column
                                prop="zcdxknx"
                                align="center"
                                label="主从动件可逆性"
                                min-width="20%">
                                </el-table-column>
                                <el-table-column
                                prop="zcdxknx"
                                align="center"
                                label="主从动件可逆性"
                                min-width="20%">
                                </el-table-column>
                                
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align:right;padding:0">
                <el-select class="" v-model="exportType" style='width:120px'>
                    <el-option
                    v-for="item in exportData"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="elBtn" type="primary" @click="exportFun">导 出</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import commonFun from './commonFun.js'
export default {
    data(){
        return {
            dialogFormVisible:false,// 机构详情对话框
            showTipMsg:true,
            noneMsg:"暂无解决方案",
            programId:"", // 方案id
            showMain:true,
            showList:false,
            exportType:3,
            exportData:[
                {name:'word文件',value:1},
                {name:'excel文件',value:2},
                {name:'pdf文件',value:3}
            ],
            form:{ // 表单参数
                id:"",
                input:"",
                out:"",
                outZhuangdong:"",
                outYidong:"",
                outDaoxiang:"",
                zczxdwz:"",
                xdcc:"",
                cdhsdfdcx:"",
                cdhsdxxbf:"",
                jsdtx:"",
                xckdx:"",
                mscxdzs:"",
                zcdxknx:"",
            },
            zczxdwz:"",
            xdcc:"",
            cdhsdfdcx:"",
            cdhsdxxbf:"",
            jsdtx:"",
            xckdx:"",
            mscxdzs:"",
            zcdxknx:"",
            specialForm:"",
            zczxdwzOptions:[],
            xdccOptions:[],
            cdhsdfdcxOptions:[],
            cdhsdxxbfOptions:[],
            jsdtxOptions:[],
            xckdxOptions:[],
            mscxdzsOptions:[],
            zcdxknxOptions:[],

            gradeList :{
                gradeNum:"",
                gradeNum2:"",
                gradeNum3:"",
                gradeNum4:"",
                gradeNum5:"",
                gradeNum6:"",
                gradeNum7:"",
                gradeNum8:"",
            },
            numList:[1,2,3,4,5,6,7,8],
            edit:true,
            editIndex:0,
            editIndexList:[],
            detailForm:{
                id:"",
                name:"",
                type:"",
                picture:"",
                cdhs:"",
                gjs:"",
                jhgx:"",
                ydlxs:"",
                rack:"",
                actuator:"",
                follower:"",
                decorate:"",
                zczxdwz:"",
                xdcc:"",
                cdhsdfdcx:"",
                cdhsdxxbf:"",
                jsdtx:"",
                xckdx:"",
                mscxdzs:"",
                zcdxknx:"",
                remarks:""

            },
            detailFormList: [],
            detailTurnList: [],
            dialogVisible:false,
            dialogImageUrl:"",
            jigouData:[],
            inputOptions:[], // 输入运动的下拉选数据
            outRotate:[], // 输出运动 -- 转动
            outMove:[], // 输出运动 -- 移动
            outGuideMove:[], // 输出运动 -- 导向移动
            currpage:1, // 当前页
            pagesizes:[3, 5, 10, 15],
            pagesize:3, // 每页显示条数
            totalNum:10, // 总数
            fanganId:'',
            selectParams:""
        }
    },
    created(){
        
        // 初始化数据字典数据
        // 输入运动
        this.$common.selectDictByCode("INPUT",res => {
            if(res.data.success)this.inputOptions = res.data.data.list
        })
        // 输出-转动
        this.$common.selectDictByCode("TURN",res => {
            if(res.data.success)this.outRotate = res.data.data.list
        })
        // 输出 -- 移动
        this.$common.selectDictByCode("MOBILE",res => {
            if(res.data.success)this.outMove = res.data.data.list
        })
        // 输出 -- 导向移动
        this.$common.selectDictByCode("GUIDE",res => {
            if(res.data.success)this.outGuideMove = res.data.data.list
        })

        // 机构特性
        this.$common.selectDictByCode("zczcdwz",res => {
            if(res.data.success)this.zczxdwzOptions = res.data.data.list
        })
        this.$common.selectDictByCode("xdcc",res => {
            if(res.data.success)this.xdccOptions = res.data.data.list
        })
        this.$common.selectDictByCode("cdhsdfdcx",res => {
            if(res.data.success)this.cdhsdfdcxOptions = res.data.data.list
        })
        this.$common.selectDictByCode("cdhsdxxbf",res => {
            if(res.data.success)this.cdhsdxxbfOptions = res.data.data.list
        })
        this.$common.selectDictByCode("jsdtx",res => {
            if(res.data.success)this.jsdtxOptions = res.data.data.list
        })
        this.$common.selectDictByCode("xckdx",res => {
            if(res.data.success)this.xckdxOptions = res.data.data.list
        })
        this.$common.selectDictByCode("mscxdzs",res => {
            if(res.data.success)this.mscxdzsOptions = res.data.data.list
        })
        this.$common.selectDictByCode("zcdxknx",res => {
            if(res.data.success)this.zcdxknxOptions = res.data.data.list
        })

        this.selectParams = this.$route.params.selectParmas?this.$route.params.selectParmas:""
        this.gradeList = this.$route.params.grageList?this.$route.params.grageList:this.gradeList
        this.specialForm = this.$route.params.specialList?this.$route.params.specialList:''
        
        if(this.selectParams){
            this.zczxdwz = this.specialForm.zczxdwz
            this.xdcc = this.specialForm.xdcc
            this.cdhsdfdcx = this.specialForm.cdhsdfdcx
            this.cdhsdxxbf = this.specialForm.cdhsdxxbf
            this.jsdtx = this.specialForm.jsdtx
            this.xckdx = this.specialForm.xckdx
            this.mscxdzs = this.specialForm.mscxdzs
            this.zcdxknx = this.specialForm.zcdxknx
            this.selectWorks()
        }
    },
    methods:{
        // 页面初始化数据查询
        initData(){            
            const params = {
                page:1,
                limit:6
            }
            var _this = this
            commonFun.selectMechanism(params,_this,result => {
                this.jigouData = result.data.data.records
            })
        },
        
        changeGrade(val){
            if(this.editIndexList.length>0){
                this.editIndexList.every((item, index, arr) => {
                    if(item != val){
                        this.editIndexList.push(val)
                    }
                })
            }else{
                this.editIndexList.push(val)
            }

        },
        // 选中输出值时
        changeOut(type){
            if(type == 1){
                this.form.outYidong = ""
                this.form.outDaoxiang = ""
                this.form.out = this.form.outZhuangdong
            }else if(type ==2){
                this.form.outZhuangdong = ""
                this.form.outDaoxiang = ""
                this.form.out = this.form.outYidong
            }else{
                this.form.outZhuangdong = ""
                this.form.outYidong = ""
                this.form.out = this.form.outDaoxiang
            }
        },
        // 高级查询
        selectWorks(){
            let gradeFlag = true
            if(this.selectParams){
                this.form = this.selectParams
            }else{
                // 获取查询条件优先级
                this.form.zczxdwz =  this.gradeList.gradeNum ?(this.zczxdwz + "|" + this.gradeList.gradeNum):this.zczxdwz
                this.form.xdcc = this.gradeList.gradeNum2 > 0?(this.xdcc + "|" + this.gradeList.gradeNum2):this.xdcc
                this.form.cdhsdfdcx = this.gradeList.gradeNum3 > 0?(this.cdhsdfdcx + "|" + this.gradeList.gradeNum3):this.cdhsdfdcx
                this.form.cdhsdxxbf = this.gradeList.gradeNum4 > 0?(this.cdhsdxxbf + "|" + this.gradeList.gradeNum4):this.cdhsdxxbf
                this.form.jsdtx = this.gradeList.gradeNum5 > 0?(this.jsdtx + "|" + this.gradeList.gradeNum5):this.jsdtx
                this.form.xckdx = this.gradeList.gradeNum6 > 0?(this.xckdx + "|" + this.gradeList.gradeNum6):this.xckdx
                this.form.mscxdzs = this.gradeList.gradeNum7 > 0?(this.mscxdzs + "|" + this.gradeList.gradeNum7):this.mscxdzs
                this.form.zcdxknx = this.gradeList.gradeNum8 > 0?(this.zcdxknx + "|" + this.gradeList.gradeNum8):this.zcdxknx

                // 判断优先级是否重复
                let array = []
                for(var i in this.gradeList){
                    this.gradeList[i]?array.push(this.gradeList[i]):""
                }
                array = array.sort();
                for (var i = 0; i < array.length; i++) {
                    if (array[i] == array[i + 1]) {
                        gradeFlag = false 
                    }
                }
                this.form.limit = this.pagesize
                this.form.page = this.currpage
            }
            
            // 判断是否选择了主要输入输出
            if(this.form.input == "" || this.form.out == ""){
                this.$message({center: true,message: "请先选择输入输出条件",type: 'warning'});
                this.showMain = true
            }else{
                if(gradeFlag){
                    this.$api.selectGreatWorks(this.form)
                    .then(result=>{
                        if(result.data.success){
                            this.jigouData = result.data.data.records
                            this.totalNum = result.data.data.total
                            if(result.data.data.records.length){
                                this.showTipMsg = false
                            }else{
                                this.noneMsg = "暂无解决方案"
                                this.showTipMsg = true
                            }
                        }else{
                            this.showTipMsg = true
                            this.noneMsg = "网络异常"
                        }
                        
                    })
                }else{
                    this.$message({center: true,message: "优先级不能重复",type: 'warning'});
                }
            }
            const params = this.form
        },
         // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectWorks()
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectWorks()
        },
        doDetail(index,row){
            this.selectById(row.id)
        },
        // 根据id查询
        selectById(id){
            this.fanganId = id
            this.$router.push({
                path: '/FDetail',
                name:`FDetail`,
                params: {
                    id: id,
                    selectParams:this.form,
                    grageList: this.gradeList,
                    specialList:{
                        zczxdwz:this.zczxdwz,
                        xdcc:this.xdcc,
                        cdhsdfdcx:this.cdhsdfdcx,
                        cdhsdxxbf:this.cdhsdxxbf,
                        jsdtx:this.jsdtx,
                        xckdx:this.xckdx,
                        mscxdzs:this.mscxdzs,
                        zcdxknx:this.zcdxknx,
                    }
                }
            })

            // this.detailFormList = []
            // this.detailTurnList = []
            // const params = {
            //     cdhsdfdcx:this.cdhsdfdcx?this.cdhsdfdcx:'空',
            //     cdhsdxxbf:this.cdhsdxxbf?this.cdhsdxxbf:'空',
            //     jsdtx:this.jsdtx?this.jsdtx:'空',
            //     xckdx:this.xckdx?this.xckdx:'空',
            //     mscxdzs:this.mscxdzs?this.mscxdzs:'空',
            //     zcdxknx:this.zcdxknx?this.zcdxknx:'空',
            //     valueType:"给定值"
            // }
            // this.detailTurnList.push(params)
            // commonFun.selectById(id,result => {
            //     this.detailForm = result.data.data
            //     result.data.data.valueType = "实际值"
            //     this.detailFormList.push(result.data.data)
            //     this.detailTurnList.unshift(result.data.data)
            //     this.dialogFormVisible = true
            //     this.dialogImageUrl = result.data.data.picture
            // })
        },
        exportFun(){
            if (!this.exportType) {
                this.$message({center: true,message: "请选择导出类型",type: 'warning'});
            }
            this.$api.exportFangan(this.exportType,this.fanganId)
            .then(res=>{
                if(res.status != 200) return this.$message({center: true,message: "导出失败",type: 'warning'});
                let blob = ""
                if(this.exportType === 1){
                    blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
                }else if(this.exportType === 2){
                    blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
                }else if(this.exportType === 3){
                    blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
                }
                let url = window.URL.createObjectURL(blob);
                let aLink = document.createElement("a");
                aLink.style.display = "none";
                aLink.href = url;
                if(this.exportType === 1){
                    aLink.setAttribute("download", `${this.detailForm.name}.doc`);
                }else if(this.exportType === 2){
                    aLink.setAttribute("download", `${this.detailForm.name}.xls`);
                }else if(this.exportType === 3){
                    aLink.setAttribute("download", `${this.detailForm.name}.pdf`);
                }
                
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink); 
                window.URL.revokeObjectURL(url); 
            })
        },
        // 重置表单
        resetForm(){
            for(let item in this.form){
                this.form[item] = ""
            }

            for(let item in this.gradeList){
                this.gradeList[item] = ""
            }
        },

    }
}
</script>

<style lang="scss" scoped>
@import "../../../../css/select.css";
i{
    display: inline-block;
    width:20px;
    height: 20px;
    margin-right:5px;
    background: url('../../../../images/icon4.png') center/cover no-repeat;
}
.aliginItem{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.flexDisplay{
    display: flex;
    justify-content: center;
    align-items: center;
}
.label{
    display: flex;
    align-items: center;
    text-align: left;
    >i{
        display: inline-block;
        width:20px;
        height: 20px;
        margin-right: 10px;
        background: url('../../../../images/icon4.png') no-repeat;
        background-size: 100% 100%;
    }
    span{
        font-size: 14px;
    }
}
.addContent{
    height: 98%;
    margin-top: 30px;
    .topBtn{
        display: flex;
        // align-items: center;
        // justify-content: flex-start;
        .tabText{
            display: flex;
            align-items: center;
            // width: 20%;
        }
        .leftTop{
            flex: 10;
            display: flex;
            justify-content: flex-start;
            width:45%;
        }
        .rightTop{
            flex: 10;
            display: flex;
            justify-content: flex-start;
            width: 50%;
        }
        span{
            display: flex;
            align-items: center;
            width:auto;
            margin-right: 10px;
            padding-bottom: 4px;
            line-height: 30px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            &.active{
                border-bottom: 2px solid #76383B;
                font-weight: bold;
                color: #76383B;
            }
        }
    }
    .topBox{
        display: flex;
        height:85%;
        justify-content: space-between;
    }
    .bottom{
        display: flex;
        justify-content: flex-end;
        .leftBtn{
            margin-left: 5%;
        }
        .text{
            display: flex;
            margin-left: 8%;
            justify-content: center;
            align-items: center;
            color: #76383B;
            font-weight: bold;
            i{
                display: inline-block;
                width:20px;
                height: 20px;
                margin-right:15px;
                background: url('../../../../images/icon4.png') center/cover no-repeat;
            }
        }
    }
    .content{
        width: 90%;
        height: 90%;
        background: #fff;
        border: 2px solid #76383B;
        border-radius: 15px;
    }
    .leftInput{
        width: 45%;
        .topContent{
            position:relative;
            height: 30%;
        }
        .bottomContent{
            display: flex;
            position:relative;
            height: 45%;
            // padding:20px 0;
            justify-content: center;
            align-items: center;
        }
        .v-icon{
            left:-8%;
            top:-12%;
        }
        .listDown{
            display: flex;
            width:80%;
            height: 90%;
            align-items: center;
            ul{padding:0}
            ul>li{
                display: flex;
                align-items: center;
                width: 100%;
                line-height: 50px;
                >i{
                    display: inline-block;
                    width:20px;
                    height: 20px;
                    background: url('../../../../images/icon4.png') center/cover no-repeat;
                }
                >span{
                    display: flex;
                    width: 100px;
                    font-family: 'Microsoft Yahei';
                    font-size: 18px;
                    font-weight: 400;
                    color:#7A3C40; 
                    padding: 0 5px;
                    align-items: center;
                    >i{
                        display: inline-block;
                        width:20px;
                        height: 20px;
                        background: url('../../../../images/icon4.png') center/cover no-repeat;
                    }
                    
                }
                div.select{
                    position: relative;
                    width:53%;
                }
            }
        }
    }
    .leftSpacel{
        width: 50%;
        .mainContent{
            position:relative;
            height: 100%;
            .v-icon{
                left:-8%;
                top:-4%;
            }
            .formDiv{
                height: 92%;
                width: 100%;
                margin-top: 20px;
                overflow-y: auto;
                .el-form{
                    min-width: 463px;
                }
            }
        }
    }
    .rightOut{
        width: 50%;
        .rightContent{
            position: relative;
            width: 90%;
            height: 90%;
            background: #fff;
            border: 2px solid #76383B;
            border-radius: 15px;
            .v-icon{
                left:-8%;
                top:-4%;
            }
            .listBox{
                width: 95%;
                height: 84%;
                margin:auto;
                margin-top: 40px;
            }
            .emptyImg{
                width: 70%;
                height: 95%;
                margin: auto;
                margin-top:3%;
                >img{
                    width:100%;
                    height: 100%;
                }
            }
            .contentBox{
                width: 100%;
                height: 100%;
            }
            .imgBox{
                display: flex;
                width: 95%;
                height: 89%;
                flex-wrap: wrap;
                justify-content:center;
                margin: auto;
                margin-top: 15px;
                // cursor: pointer;
                overflow-y: auto;
                
                .noneData{
                    width: 100%;
                    color: #76383B;
                    font-size: 14px;
                }
                img{
                    width: 45%;
                    height: 100%;
                }
                .box-card,.box-content{
                    width: 90%;
                    height:40%;
                    margin-top:10px;
                    margin-left:3%;
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    .clearfix{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }
                    .sort{
                        flex: 1;
                        display: inline-block;
                        margin-left: 0;
                        padding: 3px 5px;
                        font-size: 14px;
                        color: #fff;
                        background: #DBA6AA;
                        border-radius:25%;
                    }
                    .name{
                        flex: 11;
                    }
                    .detail{
                       flex: 2; 
                       font-size: 12px;
                       color: #DBA6AA;
                       cursor: pointer;
                    }
                }

                .el-card__header{
                    padding: 6px 20px !important;
                }
                .el-card__body{
                    height: 70% !important;
                }
            }
            .pagenationBox{
                display: flex;
                height: 8%;
                // margin:auto;
                justify-content: center;
                align-items: center;
                overflow-x: auto;
            }
        }
    }
    .el-form.dialogForm{
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        .el-form-item{
            width: 45%;
            .worksInput{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .labelText{
                    display: flex;
                    align-items: center;
                    text-align: left;
                    >i{
                        display: inline-block;
                        width:20px;
                        height: 20px;
                        margin-right: 10px;
                        background: url('../../../../images/icon4.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .addImg{
                    width: 50%;
                    height: 50%;
                    >div{
                        width:100%;
                        height: 100%;
                    }
                    img{
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }
                .common_textarea{
                    width: 60%;
                }
            }
        }
    }
}

.detailMain{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    .commonStyle{
        display: flex;
        width:100%;
        
    }
    .leftImg{
        flex: 4;
        >div{
            width: 100%;
            height: 100%;
        }
        img{
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
    }
    .rightContent{
        flex: 10;
        margin-left: 1%;
        .title{
            font-size: 20px;
            font-weight: bold;
            color: #7A3C40;
        }
        ul{padding: 0;margin: 0;}
        li{
            // line-height: 25px;
            display: flex;
            align-items: center;
        }
        span{
            line-height: 35px;
        }
        .labelText{
            margin-right: 8px;
            font-size: 14px;
            font-weight: bold; 
            color: #7A3C40;
        }
    }
    
    .funBox{
        height: 35%;
    }
    .specialBox{
        height: 55%;
    }
}
</style>